<template>
	<view class="wrap">
		<view class="key-input">
			<view class="title">输入验证码</view>
			<view class="tips">验证码已发送至 {{login.loginName}}</view>
			<u-message-input :focus="true" :value="value" @change="changeMess" @finish="finish" mode="bottomLine" width="70" :maxlength="maxlength"></u-message-input>
			<text :class="{ error: error }">{{errorText}}</text>
			<view class="captcha">
				<text :class="{ noCaptcha: show }" @tap="noCaptcha">收不到验证码点这里</text>
				<text :class="{ regain: !show }">{{ second }}秒后重新获取验证码</text>
			</view>
		</view>
	</view>
</template>

<script>
let that, interval
import {mapGetters,mapActions} from 'vuex'
export default {
	data() {
		return {
			maxlength: 6,
			value: '',
			second:60,
			show: false,
			error: false,
			errorText:'验证码错误，请重新输入',
			login:{
				loginName:'',
			}
		};
	},
	computed: {
		...mapGetters(['APPTheme','userInfo','api'])
	},
	onLoad(e) {
		that=this
		console.log(e);
		that.login.loginName=e.loginName
		//获取验证码
		that.getCaptcha()
		that.initTime()
	},
	methods: {
		...mapActions(['set_userInfo','set_userToken','set_rememberPassword','remove_rememberPassword']),
		//获取验证码
		getCaptcha(){
			let req={
				phone:that.login.loginName,
			}
			that.GLOBAL.doGet(that.api.GLOBAL_admin_getMessage,req).then(res=>{
				console.log(res);
				if(res.data&&res.data.sendSmsResponse){
					uni.showToast({
						title: res.data.sendSmsResponse.message,
						icon:'none'
					});
				}
			})
		},
		
		// 收不到验证码选择时的选择
		noCaptcha() {
			uni.showModal({
				title: '提示',
				content: '重新获取验证码',
				success: res => {
					if(res.confirm){
						that.initTime()
						that.getCaptcha()
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		changeMess(value){
			if(value.length!=6){
				that.error=false
			}
		},
		// 输入完验证码最后一位执行
		finish(value) {
			console.log('finish', value);
			let req={
				phone:that.login.loginName,
				mobileCode:value,
			}
			that.GLOBAL.doPost(that.api.GLOBAL_admin_loginByPhone,req).then(res=>{
				if(res.code!='200'){
					that.errorText=res.data
					that.error = true;
				}else{
					//存储userToken
					that.set_userToken(res.data.token)
					//存储用户信息
					that.set_userInfo(res.data)
					uni.showToast({
						title: res.msg,
						icon:'none',
						success() {
							that.login.isRotate=false
							//获取国科量子参数
							//#ifdef APP-PLUS
							that.gkQSS()
							//#endif
							uni.$emit('start_up_heartBeat')//启动心跳
							uni.switchTab({
								url: '/pages/tabbar/index',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
							
						}
					});
				}
			})
		},
		//获取国科量子参数
		gkQSS(){
			that.GLOBAL.doGet(that.api.GLOBAL_rest_chat_encryption_initKey,{keyIndex:that.login.loginName}).then(res=>{
				if(res.code=='00'){
					let qss=res.data
					that.$lizhao.QSS.initQSS(qss.pubkey,qss.prvkey,qss.kek,qss.zmk)
				}
				
			});
		},
		initTime(){
			that.second=60
			that.error=false
			clearInterval(interval);
			interval = setInterval(() => {
				this.second--;
				if (this.second <= 0) {
					this.show = true;
					clearInterval(interval);
				}
			}, 1000);
		}
		
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	padding: 80rpx;
}

.box {
	margin: 30rpx 0;
	font-size: 30rpx;
	color: 555;
}

.key-input {
	padding: 30rpx 0;
	text {
		display: none;
	}
	.error {
		display: block;
		color: red;
		font-size: 30rpx;
		margin: 20rpx 0;
	}
}

.title {
	font-size: 50rpx;
	color: #333;
}

.key-input .tips {
	font-size: 30rpx;
	color: #333;
	margin-top: 20rpx;
	margin-bottom: 60rpx;
}
.captcha {
	color: $u-type-warning;
	font-size: 30rpx;
	margin-top: 40rpx;
	.noCaptcha {
		display: block;
	}
	.regain {
		display: block;
	}
}
</style>
